<template id="temp">
  <div class="capp">
    <van-nav-bar
      title="在线客服"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="inpbottom">
      <input type="text" class="btminp" />
      <button class="btmimg">图片</button>
      <img src="/src/img/face.png" class="btmface" @click="active = !active" />
      <button class="btmbtn">发送</button>
      <div class="faceall" v-show="active">
        <van-grid :border="false" :column-num="4">
          <van-grid-item v-for="(v,i) in imgdate" :key="i">
            <van-image
              :src="v"
            />
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { reactive, toRefs } from "vue";
export default {
  setup() {
    const state = reactive({
      active: false,
      imgdate: [
        "/src/img/aaa.jpg",
        "/src/img/bbb.jpg",
        "/src/img/ccc.jpg",
        "/src/img/ddd.jpg",
        "/src/img/eee.jpg",
        "/src/img/fff.jpg",
        "/src/img/ggg.jpg",
        "/src/img/hhh.jpg",
        "/src/img/iii.jpg",
        "/src/img/jjj.jpg",
        "/src/img/kkk.jpg",
        "/src/img/lll.jpg",
      ],
    });
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.capp {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}
.inpbottom {
  width: 100%;
  height: auto;
  background-color: white;
  position: fixed;
  bottom: 0;
}
.btminp {
  width: 60%;
  height: 35px;
  border-radius: 25px;
  border: 1px solid #ccc;
  float: left;
  text-indent: 6px;
}
.faceall {
  width: 100%;
  height: 200px;
  background-color: white;
}
.btmimg {
  width: 10%;
  height: 35px;
  border-radius: 50%;
  border: 1px solid #ccc;
  font-size: 13px;
  margin-left: 3%;
  float: left;
  background-color: blue;
  color: white;
}
.btmface {
  width: 10%;
  height: 35px;
  float: left;
  margin-left: 3%;
}
.btmbtn {
  width: 11%;
  height: 35px;
  border-radius: 25%;
  border: 0;
  font-size: 13px;
  margin-left: 3%;
  float: right;
  color: white;
  background-color: #da2339;
}
</style>
